<template>
	<view>
		<!-- <view class="order_status flex_layout">
			<view class="status_item" :class="[num==0?'active':'']" data-index="0" @click="statusClick">全部</view>
			<view class="status_item" :class="[num==1?'active':'']" data-index="1" @click="statusClick">未使用</view>
			<view class="status_item" :class="[num==2?'active':'']" data-index="2" @click="statusClick">已预约</view>
			<view class="status_item" :class="[num==3?'active':'']" data-index="3" @click="statusClick">已完成</view>
		</view> -->
		<view class="appointment">
			<block v-if="myOrders.length>0">
			<view class="appointment_item" v-for="(item,index) in myOrders" :key="index">
				<view class="appointment_title flex_layout">
					<view class="left_title">完成时间：{{item.finishtime}}</view>
					<!-- <view class="right_title flex_layout">
						<text class="yi"></text>
						已检查
					</view> -->
				</view>
				<view class="appointment_content">
					<view class="content_title">{{item.coupon_nanme}}</view>
					<view class="content_message content_message_flex flex_layout">						
						<view class="moneyNum">￥{{item.pricenumber}}</view>
					</view>					
				</view>
			</view>
      </block>
			<block v-else>
				<view class="common_block nonebg">
					<view class="appointment_item">
						<view class="noResult">暂无订单信息</view>
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	var page=1;
	var limit=5; 
	var reachbottom=false;
	export default {
		data() {
			return {
			  num:0,
				clinic_id:'',
				myOrders:[]
			}
		},
		onLoad(option) {
			this.clinic_id=option.clinic_id
			page=1;
			limit=5;
			reachbottom=false;
			this.getOrders()
		},
		onShow(){
				this.myOrders=[]
		},
		// 加载更多
		onReachBottom: function() {
			if (!reachbottom) {
				this.getOrders();
			}
		},
		methods: {
			statusClick: function(e){
				console.log(e.currentTarget.dataset.index);
				var index=e.currentTarget.dataset.index;
				this.num=index
			},
			
			getOrders:function(){
				var that=this;
				this.$common.loadToShow()
				this.$api.getOrders(
					{
					page:page,
					limit:limit,
					clinic_id:that.clinic_id
					},
					res => {
						this.$common.loadToHide();
						if (res.code == 1) {
							var pageClinicLists = res.data;
							var number=res.data.length; 
							page++;
							uni.stopPullDownRefresh();
							if (number == 0) {
								reachbottom = true
								uni.showToast({
									"title": "已经加载全部",
									icon: "none",
									duration: 1000
								});
							} else {
								that.myOrders = that.myOrders.concat(pageClinicLists);
							}
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					}
				)
			}
			
		}
	}
</script> 

<style>
	@import url('../../common/common.css');
	page{background: #f8f8f8;}
	.order_status{justify-content: space-between; padding: 0 30upx; background: #fff;}
	.order_status .status_item{color: #333; font-size: 30upx; padding: 30upx 10upx;}
	.order_status .active{color: #2562a1;}
	
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.appointment{padding: 0 30upx;}
	.appointment_item{background: #fff; border-radius: 10px; margin-top: 30upx;}
	.appointment_title{justify-content: space-between; padding: 20upx 30upx; border-bottom: 1px solid #f8f8f8;}
	.left_title{color: #999; font-size: 24upx;}
	.right_title{color: #999; font-size: 24upx;}
	.right_title text{display: inline-block; margin-right: 10upx;}
	.right_title text.yi{border: 2upx solid #1a67b8; width: 10upx; height: 10upx; border-radius: 10upx;}
	.right_title text.dai{background: #1a67b8; width: 14upx; height: 14upx; border-radius: 14upx;}
	.appointment_content{padding: 40upx 30upx;}
	.content_title{color: #333; font-size: 36upx; font-weight: bolder;}
	.content_message{margin-top: 20upx;}
	.content_message image{width: 24upx; height: 24upx;}
	.content_message text{color: #666; font-size: 24upx; margin-left: 20upx;}
	.content_message_flex{justify-content: space-between;}
	.moneyNum{color: #f44141; font-size: 36upx;}
	.common_block{background: #fff; border-radius: 10px; margin-bottom: 20upx;}
	.nonebg{background: none !important;}
	.noResult{background: #fff; padding: 30upx; font-size: 30upx; color: #999; text-align: center; border-radius: 5px;}
</style>
